<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标预览</title>
    <link rel="stylesheet" href="./src/assets/font/iconfont.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #1890ff;
            margin-bottom: 30px;
        }
        .search {
            margin-bottom: 30px;
            text-align: center;
        }
        .search input {
            width: 80%;
            max-width: 600px;
            padding: 10px 15px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s;
        }
        .search input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            border: 1px solid #f0f0f0;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .icon-item:hover {
            background-color: #e6f7ff;
            border-color: #91d5ff;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .icon-preview {
            font-size: 32px;
            margin-bottom: 10px;
            color: #1890ff;
        }
        .icon-name {
            font-size: 12px;
            color: #666;
            text-align: center;
            word-break: break-all;
        }
        .no-results {
            text-align: center;
            padding: 50px;
            color: #999;
            font-size: 16px;
        }
        .tips {
            background-color: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 4px;
            padding: 10px 15px;
            margin-bottom: 20px;
            color: #d46b08;
        }
        .tips code {
            background-color: #fff;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Iconfont 图标预览</h1>
        
        <div class="tips">
            <strong>提示：</strong>
            <p>1. 选择合适的图标后，请在 menu.js 文件中将 <code>icon: 'iconfeedback'</code> 替换为您选择的图标类名</p>
            <p>2. 图标类名格式为 <code>iconXXX</code>，请确保完整复制</p>
        </div>
        
        <div class="search">
            <input type="text" id="searchInput" placeholder="搜索图标名称...">
        </div>
        
        <div class="icon-grid" id="iconGrid">
            <!-- 图标将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 项目中使用的图标列表，从iconfont.css中提取
        const iconList = [
            'baogao-copy', 'qingjia', 'zhibanxinxi-copy', 'daqiajilu', 'zhibanguanlibeifen', 
            'luzhishipin', 'shoujidiannao', 'caigou', 'seal', 'shipin', 'paizhao', 
            'xinxibianji', 'tiyuyundongchangsuo', 'hrrenshirenshiguanli380', 'louceng', 
            'quan', 'quan1', 'jianli', 'yiyuankaohe', 'renshu', 'gangweiguanli', 
            'kaohe', 'renyuanjiankong', 'wulianwang-', 'jiankongshexiangtou-xian', 
            'shipinjiankongicon', 'shipinhuiyi', 'richeng', 'yiqingguanli', 'dongtaiguanli', 
            'choujiang', 'quxiao', 'queren-zhengque', 'jinggao', 'shanchu1', 'richengguanli', 
            'youjiantou', 'wenjianjia3', 'wenjuan2', 'tongzhi1', 'wenjuan1', 'dditu', 
            'wendang1', 'shangchuanwendangx', 'xuesheng', 'tushu1', 'wodejiaoju', 'renwu', 
            'wenjuan', 'quyu', 'wuliao1', 'fuzhutubiao-jiaoju', 'quyu1', 'jinru', 
            'tianjiarenyuan', 'dianping', 'faburenwu', 'icon', 'material', 'mima1', 
            'yonghuming', 'dagou', 'xuanzhongyuandian', 'guanbi', 'xiaoxi2', 'fabuwenzhang', 
            'wodewenzhang', 'wenzhangshenhe', 'wenzhang-pinglunx', 'pdf', 'praise', 'pinglun', 
            'zanpress', 'zhuti', 'xiangshangjiantou', 'xiangxiajiantou', 'yuechi', 'aiqingmiao_iconfont-', 
            'xitongguanli', 'yemian-copy-copy', 'shequ', 'potu', 'tongzhi', 'icon_wenjuandiaocha', 
            'shipinwenjian', 'wenben', 'sousuo', 'diyiming', 'diyiming1', 'dierming', 
            'disanming', 'dierming1', 'disanming1', 'huodong', 'weishouquan1', 'zhidan', 
            'weishouquan', 'shangchuan', 'meiyougengduo', 'canyinguanli', 'shanchu', 'shebeiguanli', 
            'tupian', 'tushuguanli', 'yingjiantubiao-', 'wenjianjia1', 'yonghuguanli', 'toupiaoguanli', 
            'wuliaoshezhi', 'task_management', 'jiaojushangcheng1', 'fanhui', 'xiaoxi', 'setting', 
            'xiaoxi1', 'tushu', 'excel', 'shebei', 'wenjianjia', 'yonghu', 'toupiao', 
            'P', 'wuliao', 'wendang', 'JPG', 'tuichu', 'beifen', 'ziyuan', 'shezhi', 'jiaojushangcheng'
        ];

        // 生成图标预览
        function generateIcons(icons) {
            const iconGrid = document.getElementById('iconGrid');
            iconGrid.innerHTML = '';

            if (icons.length === 0) {
                iconGrid.innerHTML = '<div class="no-results">没有找到匹配的图标</div>';
                return;
            }

            icons.forEach(iconClass => {
                const iconItem = document.createElement('div');
                iconItem.className = 'icon-item';
                iconItem.innerHTML = `
                    <i class="iconfont icon${iconClass}" aria-hidden="true"></i>
                    <span class="icon-name">icon${iconClass}</span>
                `;
                iconGrid.appendChild(iconItem);
            });
        }

        // 搜索图标
        function searchIcons() {
            const searchInput = document.getElementById('searchInput');
            const searchTerm = searchInput.value.toLowerCase().trim();
            
            if (searchTerm === '') {
                generateIcons(iconList);
                return;
            }

            const filteredIcons = iconList.filter(icon => icon.toLowerCase().includes(searchTerm));
            generateIcons(filteredIcons);
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            generateIcons(iconList);
            
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', searchIcons);
        });
    </script>
</body>
</html>